<body>
  <select id="province" onchange="func1(this)"></select>
  <select id="city"></select>
</body>
<script>
  data = {
    广东省: ["广州", "佛山"],
    北京: ["海淀", "廊坊"],
    海南省: ["三亚", "海口"],
  };
  var pro = document.getElementById("province");
  var city = document.getElementById("city");

  for (var i in data) {
    var option_pro = document.createElement("option");
    option_pro.innerHTML = i;
    pro.appendChild(option_pro);
  }

//   function func1(self) {
//     //console.log((self.options[self.selectedIndex]).innerHTML);
//     var choice = self.options[self.selectedIndex].innerHTML;
//     console.log(choice); // 北京
//     var options = city.children;
//     for (var k = 0; k < options.length; k++) {
//       city.removeChild(options[k--]);
//     }

//     for (var i in data[choice]) {
//       var option_city = document.createElement("option");
//       option_city.innerHTML = data[choice][i];
//       city.appendChild(option_city);
//     }
//   }
</script>
